<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="el-card__header">北京影视查询系统</span>
        <el-form :model="form" status-icon ref="form" label-width="80px">
          <el-form-item
            label="用户名"
            prop="username"
            :rules="[
              { required: true, message: '输入用户名', trigger: 'blur' },
              {
                min: 4,
                max: 10,
                message: '长度4-10字符',
                trigger: 'blur',
              },
            ]"
          >
            <el-input type="text" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password"
            :rules="[
              { required: true, message: '输入密码', trigger: 'blur' },
              {
                min: 6,
                max: 12,
                message: '长度6-12字符',
                trigger: 'blur',
              },
            ]"
          >
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="login('form')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
//引入登录接口函数
import {loginApi} from '@/utils/https'
import {setCookie} from '@/utils/cookie'
export default {
  name: "login",
  props: [""],
    data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },

  components: {},

  computed: {},

  created() {},

  mounted() {},

  methods: {
    login(form){
      
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          // console.log(this.form);
          //登录页接口
          loginApi(this.form).then(res=>{
            // console.log(res);
            if(res.code==200){
              //登录成功
              //cookie\
              setCookie('token',res.data.token)
              localStorage.setItem('role',res.data.role)
               this.$message({
          message: '恭喜你，成功登录',
          type: 'success'
        });
              this.$router.push('/home')
             
            }else{
              this.$message.error('错了哦');
            }
          })
        }else{
           alert("失败!");
          return false;
        }
      })
    }
  },
};
</script>
<style scoped lang='less'>
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  // background: #409eff;
  background: url(../assets/bg.png);
  .box-card {
    width: 500px;
    margin: 200px auto;
    .el-card__header {
      font-size: 26px;
      text-align: center;
      display: block;
      margin-bottom: 30px;
      font-weight: bold;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>